<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        //验证名字
        function checkName(){
            let regex= /^[a-zA-Z\u4e00-\u9fa5]{2,}$/;
            let nameObj=$("nameSpan");
            nameObj.style.fontSize="10px";

            if (regex.test($("userName").value)){
                nameObj.innerHTML="验证通过";
                nameObj.style.color="green";
                return true;
            }else {
                nameObj.innerHTML="名字必须为两个字以上字符";
                nameObj.style.color="red";
                return false;
            }
        }
        //验证电话
        function checkPhone(){
            let regex =/^[1][35789]\d{9}$/;
            let telObj= $("phoneSpan");
            telObj.style.fontSize="10px";
            if (regex.test($("phone").value)){
                telObj.innerText="验证通过";
                telObj.style.color="green";
                return true;
            }else {
                telObj.innerText="电话号码必须为1开头的11位";
                telObj.style.color="red";
                return false;
            }
        }
        //验证工资
        function checkSalary(){
            let regex =/^\d{2,5}$/;
            let salaryObj= $("salarySpan");
            salaryObj.style.fontSize="10px";
            if (regex.test($("salary").value)){
                salaryObj.innerText="验证通过";
                salaryObj.style.color="green";
                return true;
            }else {
                salaryObj.innerText="工资必须是两位数以上数字";
                salaryObj.style.color="red";
                return false;
            }
        }
        //验证邮箱
        function checkEmail(){
            let regex =/^[a-zA-Z0-9]{3,}@\w+[.](com|cn|net)$/;
            let emailObj= $("emailSpan");
            emailObj.style.fontSize="10px";
            if (regex.test($("email").value)){
                emailObj.innerText="验证通过";
                emailObj.style.color="green";
                return true;
            }else {
                emailObj.innerText="邮箱格式位xxx@xx.[com|cn|net]";
                emailObj.style.color="red";
                return false;
            }
        }
        function submitForm(){
           return (checkName() & checkPhone() & checkSalary() & checkEmail());
        }
        function forward(){
            location.href="display.html";
        }
        function changeShow(){
            let targetObj = $("show");
            targetObj.className="two";
        }
    </script>
    <style>
        .one{
            color: #4dc827;
        }
        .two{
            color: #1d86b9;
        }
    </style>
</head>
<body>
    <form action="add" id="form1" onsubmit="return submitForm()==0?false:true">
        姓名：<input type="text" name="userName" id="userName" onblur="checkName()"> <span id="nameSpan"></span>  <br>
        电话：<input type="tel" name="phone" id="phone" onblur="checkPhone()"> <span id="phoneSpan"></span><br>
        工资：<input type="number" name="salary" id="salary" onblur="checkSalary()"><span id="salarySpan"></span> <br>
        邮箱：<input type="email" name="email" id="email" onblur="checkEmail()"> <span id="emailSpan"></span><br>
        <input type="submit" onclick="submitForm()" value="提交">

    </form>
    <a href="../../homework/work4_19/display.html" >跳转页面</a>
    <input type="button" value="跳转页面" onclick="forward()">
</body>

    <div>
        <h2 class="one" id="show">展示效果</h2>
        <input type="submit" value="改变样式" onclick="changeShow()">
    </div>
</html>